<template>
    <div class="table">
        <div class="left">
            <el-table :data="pagedData" style="width: 100%;" border size="small" :row-class-name="isLine">
                <el-table-column prop="createtime" label="时间" width="180" />
                <el-table-column prop="host" label="域名" min-width="200px" width="200px" />
                <el-table-column prop="ip" label="IP" width="180" />
                <el-table-column prop="ip_addr" label="IP归属地" width="180" />
                <el-table-column prop="referer" label="referer" />
                <el-table-column prop="event" label="事件" width="100" />
            </el-table>
            <el-pagination background layout="prev, pager, next" :pager-count="10" :total="total" :page-size="pageSize"
                @current-change="handleCurrentChange" />
        </div>
        <div class="right">
            <Panel />
        </div>
    </div>
</template>

<script lang="ts" setup>
import Panel from "@/views/routers/table/Panel.vue";
import { computed, ref, watch } from 'vue'
import { useStore } from 'vuex'

const store = useStore()

const tableData = computed(() => store.state.table)
const total = ref(tableData.value.length)

const currentPage = ref(1)
const pageSize = ref(500)

const isLine = ({ row, column }) => { 
    if(row.event === "添加line"){
        return "isLine";
    }
}

const pagedData = computed(() => {
    const start = (currentPage.value - 1) * pageSize.value
    const end = start + pageSize.value
    return tableData.value.slice(start, end)
})

const handleCurrentChange = (page: number) => {
    currentPage.value = page
}

watch(tableData, (newTableData) => {
    total.value = newTableData.length
})

</script>


<style scoped lang="less">
.table {
    width: 100%;
    height: 100%;
    display: flex;

    .left{
        width: calc(100% - 300px);
    }

    .right {
        width: 300px;
    }

    ::v-deep(.el-table) {
        height: calc(100% - 40px);
        color: #222;
        font-weight: 700;

        .isLine {
            background-color: #c6e2ff;
        }
    }
}



.el-pagination {
    margin-top: 8px;
    display: flex;
    justify-content: center;
}
</style>